<template>
	<view>
		<view style="padding: 20rpx;">
			<view v-if="active===1">
				<home></home>
			</view>
			<view v-if="active===2">
				<Inquire></Inquire>
			</view>
			<view v-if="active===3">icon-my</view>
			<view v-if="active===4">
				<Interrogation></Interrogation>
			</view>
			<view v-if="active===5">
				<user></user>
			</view>

		</view>
		<ibalbal-tabbar :active="active" @changeActiveIndex="changeActiveIndex" :config="iconConfig"></ibalbal-tabbar>

	</view>
</template>

<script>
	import IbalbalTabbar from "@/components/ibalbal-tabbar/ibalbal-tabbar.vue";
	import home from "../home/home.vue"
	import Inquire from "../Inquire/Inquire.vue";
	import Interrogation from "../Interrogation/Interrogation.vue";
	import user from "../user/user.vue"
	export default {
		components: {
			IbalbalTabbar,
			home,
			Inquire,
			Interrogation,
			user
		},
		data() {
			return {
				active: 1,
				iconConfig: [{
					icon: "icon-all-application",
				}, {
					icon: "icon-scan",
				}, {
					icon: "icon-my",
				}, {
					icon: "icon-my",
				}, {
					icon: "icon-my",
				}]
			}
		},
		methods: {
			changeActiveIndex(index) {
				this.active = index
			}
		}
	}
</script>